<template>
    <IIView :loading="loading" v-model="defaultValue">
        <Card :dis-hover="false">
            <h3>入库单[{{data.code}}]详情页面</h3>
        </Card>
        <Row :gutter="20">
            <Col :span="6">
                <Card title="标签" icon="ios-options" bordered :padding="0">
                    <CellGroup @on-click="cellGroupClick">
                        <Cell title="基础信息" label="Basic Information" :selected="showCell === 'basic'" name="basic"/>
                        <Cell title="日志信息" label="Logs Information" :selected="showCell === 'logs'" name="logs"/>
                    </CellGroup>
                </Card>
            </Col>
            <Col :span="18" v-show="showCell === 'basic'">
                <Card bordered icon="md-aperture" title="基础信息">
                    <Row>
                        <ItemCol :span="6">
                            <template slot="title">入库单号:</template>
                            {{data.code}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">进境关别:</template>
                            <RemoteSpan url="common/select/port" :value="data.district"></RemoteSpan>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">进口类型:</template>
                            <RemoteSpan url="common/select/dictionaries/ENTRY_CODE" :value="data.type"></RemoteSpan>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">入库单状态:</template>
                            <RemoteSpan url="common/select/dictionaries/RECEIVING_STATUS" :value="data.status"></RemoteSpan>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">货物总价值:</template>
                            {{data.price.toLocaleString()}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">货物总毛重:</template>
                            {{data.weight.toLocaleString()}} KG
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">件数:</template>
                            {{data.piece.toLocaleString()}} <RemoteSpan url="common/select/packing" :value="data.packing"></RemoteSpan>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">产品个数:</template>
                            {{data.product_count.toLocaleString()}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">创建时间:</template>
                            {{data.created_at}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">最后修改时间:</template>
                            {{data.updated_at}}
                        </ItemCol>
                        <ItemCol :span="24">
                            <template slot="title">备注:</template>
                            {{data.remark}}
                        </ItemCol>
                    </Row>
                </Card>

                <Card bordered icon="md-aperture" title="产品信息">
                    <IProduct :value="data.products"></IProduct>
                </Card>
            </Col>
            <Col :span="18" v-show="showCell === 'logs'">
                <Card bordered icon="md-aperture" title="日志信息">
                    <ILogs :value="data.logs"></ILogs>
                </Card>
            </Col>
        </Row>
    </IIView>
</template>

<script>
    import IIView from "../../../../components/layout/IIView";
    import IViewMixins from "../../../../mixins/iViewMixins";
    import ILogs from "../../../../components/layout/ILogs";
    import ItemCol from "../../../../components/layout/ItemCol";
    import RemoteSpan from "../../../../components/layout/RemoteSpan";
    import IProduct from "./product";

    export default {
        name: "IIIView",
        components: {IProduct, RemoteSpan, ItemCol, ILogs, IIView},
        mixins: [IViewMixins],
        data() {
            return {
                showCell: 'basic',
                data: {logs: [], files: [], products: [], price:0, weight: 0, piece: 0,product_count:0}
            }
        },
        methods: {
            getData() {
                this.loading = true;
                this.$http.get(`warehouse/receiving/${this.props.id}`).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            },
            cellGroupClick(name) {
                this.showCell = name;
            }
        }
    }
</script>

<style scoped>
    .ivu-card {
        margin-bottom: 15px;
    }
</style>
